<!-- 流水记录Modal STRAT -->
<nz-modal
  nzClassName="flow-record-modal"
  nzWidth="800px"
  [nzFooter]="null"
  [(nzVisible)]="isRecordVisible"
  nzTitle="流水记录"
  (nzAfterOpen)="loadModalTable()"
  (nzOnCancel)="handleCancel()">

  <ng-container *nzModalContent>
    <div class="table-wrap">
      <nz-table
        #modalTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzBordered
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="modalTableParams.loading"
        [nzData]="modalTableData"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="modalTableParams.total"
        [nzPageIndex]="modalTableParams.page"
        [nzPageSize]="modalTableParams.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
      >
        <thead>
          <tr>
            <th nzAlign="center">序号</th>
            <th nzAlign="center">发生时间</th>
            <th nzAlign="center">标题</th>
            <th nzAlign="center">发生金额</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let data of modalTable.data; let index = index;">
            <td nzAlign="center">{{ index + 1 }}</td>
            <td nzAlign="center">{{ data.createTime || '-' }}</td>
            <td nzAlign="center">{{ data.title || '-' }}</td>
            <td nzAlign="center">{{ data.amount | number: '1.2' }}</td>
          </tr>
        </tbody>
      </nz-table>

      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ modalTableParams.total }} 条</ng-template>
    </div>
  </ng-container>
</nz-modal>
<!-- 流水记录Modal END -->